<template>
   <div class="app-container">
     <el-row :gutter="20">
       <el-col :span="6" :xs="24">
          <treeComp @changeNode= "changeNode" ></treeComp>
       </el-col>
       <el-col :span="18" :xs="24">
          <el-tabs  type="border-card" model-value="formAttr" class="demo-tabs" @tab-click="tabClick" @tab-change="tabChange" >
              <el-tab-pane  label="表单属性" name="formAttr">
                 <tableComp :props="currentNode"></tableComp>
              </el-tab-pane>
              <el-tab-pane label="流程设置" name="flow">
                 <flowComp v-if="tabLoad.flow" :props="currentNode"></flowComp>
              </el-tab-pane>
          </el-tabs>
         
       </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
  export default {
    name: 'formDesign'
  };
</script>

<script setup lang="ts">
    /***基础组件引入***/
    import { reactive, ref, watchEffect, onMounted, getCurrentInstance, toRefs } from 'vue'
    import { ElTree, ElMessage } from 'element-plus';
    import { Document, Folder, Plus, Edit, Delete } from '@element-plus/icons-vue';

    /****子组件引入****/
    import treeComp from './formTree';
    import tableComp from './formAttrTable';
    import flowComp from './flow';
   

   // const deptTreeRef = ref(ElTree); 
    const state = reactive({
      currentNode: null,
      tabLoad:{
        flow: false
      }
    });
    const {
      currentNode,
      tabLoad
    } = toRefs(state);

    function changeNode(node){
       state.currentNode= node;
    }
    function tabChange(paneName){
       if(paneName == 'flow'){
         state.tabLoad.flow = true;
         return;
       }
    }
   
  
</script>

<style></style>